<template>

  <!--导航栏组件-->
  <TabHead></TabHead>

  <el-row>
    <!--左侧分类栏区域-->
    <el-col :span="6">
      <el-affix>
        <el-menu
            default-active="1"
            active-text-color="#000000"
            style="opacity: 0.9;border-radius: 10px;margin-left: 25%;margin-top: 5%"
        >
          <el-menu-item index="1" style="font-size: large;" @click="load()">全部</el-menu-item>
          <el-menu-item index="2" style="font-size: large;" @click="chose('Java')">Java</el-menu-item>
          <el-menu-item index="3" style="font-size: large;" @click="chose('前端')">前端</el-menu-item>
          <el-menu-item index="4" style="font-size: large;" @click="chose('后端')">后端</el-menu-item>
          <el-menu-item index="5" style="font-size: large;" @click="chose('数据库')">数据库</el-menu-item>
          <el-menu-item index="6" style="font-size: large;" @click="chose('web基础')">Web基础</el-menu-item>
          <el-menu-item index="7" style="font-size: large;" @click="chose('工具使用')">工具使用</el-menu-item>
        </el-menu>

        <!--打开评论区按钮-->
        <el-button
            style="float: left;margin-top: 30px;margin-left: 45%;opacity: 0.8"
            @click="comment()"
            circle
            size="large"
        >
          留言区
        </el-button>
      </el-affix>
    </el-col>

    <!--信息卡片-->
    <el-col :span="13" >
      <div v-for="article in state.form" :key="article.id" style="margin: 30px">
        <el-card class="box-card" @click="toShow(article.id)" style="border-radius: 30px">
          <template #header>
            <div class="card-header">
                   <span style="font-size: 150%;font-weight: bolder;">
                     {{ article.title }}
                     <el-tag type="warning" style="margin-left: 10px">{{ article.category }}</el-tag>
                   </span>
            </div>
          </template>
          <div style="margin-left: 40px;font-weight: bold">{{ article.description }}</div>
          <div style="margin-top: 20px;float: right;font-weight: bold">创建人：{{ article.createby }}</div>
        </el-card>
      </div>
    </el-col>

    <!--公告栏-->
    <el-col :span="5">
      <el-affix>
        <el-card class="note" style="border-radius: 10px;opacity: 0.7;">
          <div class="card-header" style="margin-bottom: 10px">
            <span>公告:</span>
          </div>
          <a href="https://gitee.com/feimaopian/fei-blog/tree/master/">博客项目介绍</a>
        </el-card>
      </el-affix>
    </el-col>
  </el-row>

  <!--回到顶部-->
  <el-backtop :right="100" :bottom="100"/>

  <!--评论区-->
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <el-input
        v-model="state.commition.context"
        :rows="3"
        type="textarea"
        placeholder="快来留下你的评论吧"
        size="large"
    />
    <el-button type="primary" style="float: right;margin-top: 10px" @click="commit()">发布</el-button>

    <div style="margin-top: 70px;margin-bottom: -50px" v-for="comments in state.comments" :key="comments.comment_id">
      <el-card class="el-card">
        <div style="font-weight: bold;font-size: 85%">{{ comments.username }}:</div>
        <div style="font-weight: bold;margin-left: 40px;font-size: 75%">{{ comments.context }}</div>
      </el-card>
    </div>
  </el-drawer>

</template>

<script setup>
import TabHead from "../components/TabHead.vue";
import {reactive, ref} from "vue";
import request from "../request.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import { ElLoading } from 'element-plus'

//评论区打开的控制变量
const drawer = ref(false)

const state = reactive({
  form: [],
  comments: [],
  commition: {
    user_id: localStorage.getItem("user_id"),
    username: localStorage.getItem("username"),
    context: null
  },
  options:{
    fullscreen: true,
    text: "正在加载，请稍等...",
    lock:true
  }
})

//加载页面信息
const load = () => {
  //加载动画加入后，router.push就会报错，目前不知道为什么
  // let loadingInstance = ElLoading.service(state.options)
  state.form = []
  state.comments = []
  request.get("/article/findAll").then(res => {
    for (const re of res) {
      state.form.push(re)
    }

  })

  request.get("/comment/findAll").then(res => {
    for (const re of res) {
      state.comments.push(re)
    }
  })

  // loadingInstance.close()
}
load()

//选择文章种类
const chose = (kind) => {
  state.form = []
  request.get("/article/findAll").then(res => {
    for (const re of res) {
      if (re.category == kind) {
        state.form.push(re)
      }
    }
  })
}

//转跳到具体文章内容展示
const router = useRouter();
const toShow = (id) => {
  router.push({
    name: "show",
    params: {
      id
    }
  })
}

//评论判断是否登录
const comment = () => {
  if (localStorage.length === 0) {
    ElMessage({
      message: '请先登录',
      type: 'warning',
    })
    router.push("/Login")
  } else {
    drawer.value = true
  }
}

//提交评论
const commit = () => {
  request.post("/comment/add", state.commition).then(res => {
    if (res === true) {
      console.log("res")
      ElMessage.success("提交成功")
      state.commition.context = null
      load()
    } else {
      ElMessage.error("提交失败")
    }
  })
}


</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  cursor: pointer;
}

.note {
  margin-right: 15%;
  margin-top: 5%;
}

.el-button.is-circle {
  --el-button-size: 50px;
  border-radius: 50%;
  padding: 50px;
}

</style>
